<template>
	<view>
		<tn-nav-bar >我的主题</tn-nav-bar>
		<view class="my_order" :style="{paddingTop: vuex_custom_bar_height+30+ 'px'}">
			
			<view style="margin-bottom: 18px;">
				<view style="display: flex;align-items: center;color:#ff6708" @tap="addTopic">
					<span class="tn-icon-add-circle" style="font-size: 30px;"></span>
					<span> 添加主题</span>
				</view>
			</view>
			<tn-list-view unlined="bottom"  backgroundColor="none">
				
			  <tn-list-cell :unlined="true" v-for="(item,index) in list" :key="index" backgroundColor="none">
			    <view class="message">
			      
			      <view class="message__middle">
			        <view class="message__name">{{item.name}} | {{item.times|| 0}}分钟</view>
			        <view class="message__content tn-text-ellipsis" style="color: #ff6708;">￥{{item.price}}</view>
			      </view>
			      <view class="message__right">
			       <tn-button @tap="deleteRow(item)" size="sm"  backgroundColor="#ff6708" fontColor="#fff">删除</tn-button>
			      </view>
			    </view>
			  </tn-list-cell>
			  
			</tn-list-view>
			
			<view class="empty__item" v-if="list.length < 1 && !loading" style="margin-top: 200px;">
			  <tn-empty mode="list"></tn-empty>
			</view>
			
		</view>	
		<TemplateLoading :active="loading"></TemplateLoading>
		<tn-modal
		  v-model="show"
		  title="添加主题"
		  :button="button"
		  :custom="true"
		  @click="clickBtn"
		>
		  <view >
		    <view class="custom-modal-content">
		      <tn-form :labelWidth="140">
		        <tn-form-item label="名称" :borderBottom="false">
		          <tn-input v-model="addParam.name" placeholder="请输入主题名称"></tn-input>
		        </tn-form-item>
		        <tn-form-item label="价格" :borderBottom="false">
		          <tn-input v-model="addParam.price" placeholder="请输入价格"></tn-input>
		        </tn-form-item>
				
				<tn-form-item label="时长" :borderBottom="false">
				  <tn-input v-model="addParam.times" placeholder="请输入时长（分钟）"></tn-input>
				</tn-form-item>
				
				<tn-button @tap.stop="subTopic()" :fontSize="20" padding="10rpx" height="76rpx" width="100%" backgroundColor="#FF6708" fontColor="tn-color-white" >确定提交</tn-button>
		      </tn-form>
		    </view>
		  </view>
		</tn-modal>
	</view>
</template>

<script>
	import {mentorTopic, addTopic,deleteTopic} from '@/api/mentor/index.js'
	export default {
		data() {
			return {
				loading:false,
				list:[],
				addParam:{
					name:'',
					price:'',
					times:''
				},
				button: [
				  {
					text: '确认添加',
					backgroundColor: '#ff6708',
					fontColor: '#FFFFFF'
				  }
				],
				show:false
			}
		},
		onLoad() {
			this.initData()
		},
		methods: {
			deleteRow(item){
				this.loading = true
				var _t = this
				deleteTopic({id:item.id}).then(res=>{
					this.loading = false
					uni.showToast({
						icon:'none',
						title:'删除成功',
						duration:2000
					})
					
					setTimeout(function(){
						_t.loading = false
					},2000)
					
					this.initData()
					
				},err=>{
					this.loading = false
				})
			},
			subTopic(){
				if(this.addParam.name.length < 1){
					uni.showToast({
						icon:'none',
						title:"主题名不能为空"
					})
					
					return false;
				}
				
				if(this.addParam.price <= 0){
					uni.showToast({
						icon:'none',
						title:"主题价格不能为空"
					})
					
					return false;
				}
				
				if(this.addParam.times <= 0){
					uni.showToast({
						icon:'none',
						title:"服务时长不能为空"
					})
					
					return false;
				}
				if(this.loading == true) return ;
				
				this.show =false
				this.loading = true
				var _t= this
				
				addTopic(this.addParam).then(res=>{
					uni.showToast({
						icon:'none',
						title:'添加成功',
						duration:2000
					})
					
					setTimeout(function(){
						_t.loading = false
					},2000)
					
					this.initData()
				})
			},
			addTopic(){
				this.show = true
			},
			initData(){
				this.loading = true
				mentorTopic().then(res=>{
					this.list = res
					this.loading = false
				},err=>{
					this.loading = false
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
  .my_order{
  	  background: $tn-main-bg;
  	  height: 100vh;
  	  padding-left: 6%;
  	  padding-right: 6%;
  }
  
  .tn-radius10{border-radius: 10rpx;}
 
  .custom-title {
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
    padding: 10rpx 20rpx;
  }
  
  .list__options {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  
  .list {
    &__left {
      display: flex;
      align-items: center;
      justify-content: flex-start;
      
      &__icon, &__image {
        margin-right: 18rpx;
      }
    }
    
    &__right {
      display: flex;
      align-items: center;
      justify-content: flex-end;
    }
  }
  
  .list-icon-text, .list-image-text {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  
  .list-image-text {
    .list {
      &__left {
        &__image {
          width: 20rpx;
          height: 20rpx;
        }
      }
    }
  }
  
  .message {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-around;
    
    &__left {
      width: 10%;
    }
    &__middle {
      width: 80%;
      padding-left: 20rpx;
      padding-right: 40rpx;
    }
    &__right {
      width: 30%;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
    }
    
    &__name {
      font-size: 32rpx;
      margin-bottom: 8rpx;
    }
    &__content {
      font-size: 26rpx;
      color: #838383;
    }
    &__tips {
      &__icon {
        font-size: 36rpx;
        color: #AAAAAA;
      }
    }
  }
</style>
